<template>
 <div class="yuekexp">
   <div class="lb">
     <div class="img"><img :src="item.cover_img" alt=""/></div>
     <div class="name">{{ item.name }}</div>
     <br/>
     <br/>
     <p>作者{{ item.instruction }}</p>
     <p class="xb">库存:{{ item.stock }}</p>
     <div class="nl">{{ item.price / 100 + ".00" }}</div>
     <div class="div">运费:免运费</div>
   </div>
   <div class="yh">
     &emsp;活动:&emsp;<span class="sp">优惠</span>&emsp;领取优惠卷最多可减<samp class="sa">20</samp
   >
     <span class="sa1">领取></span>
   </div>
   <div class="tap">
     <ul>
       <li
           v-for="(item, index) in list"
           :key="index"
           @click="tab(index)"
           :class="{ active: flag == index }"
       >
         {{ item }}
       </li>
     </ul>
   </div>
   <div class="xp">
     图书详情
     <div>{{ item.instruction }}</div>
   </div>
   <div class="tu">
     <img src="@/assets/img/2.png" alt=""/>
   </div>
   <div class="bom">
     <button @click="add(item)">立即购买</button>
   </div>
 </div>

</template>

<script>
import MylistCard from "@/components/yueke/MylistCard";
import { getYuekeDetail } from "../../utils/api";
import { Toast } from "vant";
export default {
  data() {
    return {
      id: this.$route.query.id,
      list: ["图书介绍", "图书评价"],

      flag: "",
      item: [],
      app: ""
    };
  },
  mounted() {
    getYuekeDetail(this.id).then(res => {
      this.item = res.data;
    });
  },
  methods: {
    tab(i) {
      this.flag = i;
    },
    add(item) {
      let app = this.item.stock;
      if (app == "0") {
        Toast("你来晚了哦,已经没有库存了~");
      } else {
        console.log(item);
        this.$router.push({ path: "/Yuekegwc", query: { id: this.id } });
      }
    }
  },
  components: {
    MylistCard
  }
};
</script>

<style lang='scss' scoped>
.yuekexp {
  width: 100%;
  height: 100%;
  background-color: #f4f4f4;

  .lb {
    width: 100%;
    height: 160px;
    background-color: #fff;
    display: flex;

    .img {
      width: 94px;
      height: 130px;
      margin-top: 15px;
      margin-left: 10px;
      border-radius: 5px;
      display: flex;

      img {
        width: 100%;
        border-radius: 5px;
      }
    }

    .name {
      width: 195px;
      height: 30px;
      font-size: 16px;
      margin-top: 20px;
      margin-left: 20px;

      span {
        height: 20px;
        //   margin-top: 25px;
        font-size: 10px;
        margin-left: 8px;
        color: rgb(241, 122, 42);
      }
    }

    p {
      position: absolute;
      left: 137px;
      height: 20px;
      color: rgb(182, 179, 179);
      margin-top: 50px;
    }

    .xb {
      position: absolute;
      left: 137px;
      // top: 20px;
      height: 20px;
      color: rgb(182, 179, 179);
      margin-top: 70px;
    }

    .nl {
      position: absolute;
      left: 140px;
      color: rgb(255, 0, 0);
      height: 20px;
      font-size: 20px;
      margin-top: 120px;
    }

    .zhiye {
      position: absolute;
      left: 200px;
      color: rgb(194, 190, 190);
      height: 20px;
      margin-top: 70px;
    }
  }

  .div {
    position: absolute;
    left: 270px;
    width: 80px;
    height: 20px;
    margin-top: 120px;
    color: #ccc;
  }

  .yh {
    width: 100%;
    height: 40px;
    line-height: 40px;
    margin-top: 10px;
    font-size: 13px;
    color: rgb(116, 116, 116);
    display: flex;
    background-color: #fff;
    .sa {
      color: rgb(255, 0, 0);
    }

    .sa1 {
      margin-left: 90px;
    }

    .sp {
      width: 40px;
      height: 20px;
      margin-top: 10px;
      text-align: center;
      line-height: 20px;
      color: #000;
      background-color: rgb(211, 162, 38);
    }
  }

  .tap {
    ul {
      display: flex;
      background-color: #fff;
      width: 100%;
      height: 40px;
      margin-top: 10px;
      display: flex;
      text-align: center;
      line-height: 40px;
      font-size: 17px;

      li {
        width: 50%;
        height: 45px;
        line-height: 45px;
        text-align: center;
        flex-shrink: 0;
        font-size: 14px;
      }

      .active {
        color: rgb(255, 0, 0);
        padding-bottom: 10px;
      }
    }

    ul::-webkit-scrollbar {
      display: none;
    }
  }

  .xp {
    width: 100%;
    background-color: #fff;
    padding: 10px;
    margin-top: 5px;
    height: 70px;
    line-height: 40px;
    font-size: 16px;

    div {
      width: 70px;
      height: 20px;
      line-height: 20px;
      //   text-align: center;
    }
  }

  .tu {
    width: 100%;
    height: 270px;
    img {
      width: 100%;
      padding-top: 5px;
    }
  }
  .bom {
    width: 100%;
    height: 50px;
    background-color: #fff;
    display: flex;
    align-items: center;
  }
  button {
    width: 95%;
    margin-left: 10px;
    height: 35px;
    border-radius: 15px;
    border: 0;
    background-color: red;
    color: rgb(255, 255, 255);
  }
}
.zhedang {
  width: 200px;
  height: 80px;
  background-color: rgba(0, 0, 0, 0.746);
  position: fixed;
  color: rgb(255, 255, 255);
  left: 90px;
  top: 240px;
  font-size: 14px;
  text-align: center;
  line-height: 80px;
}
</style>
